<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>书籍情况</h1>
    <com-a v-for="b in books" :name="b.name" :price="b.price" @abc="fun_a"></com-a>
    <br/>
    <b>总价：{{price}}元</b>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component('com-a', {
        props: ['name', 'price'],
        data() {
            return {
                number: 0
            }
        },
        methods: {
            fun_a() {
                this.number++
                this.$emit('abc', this.price)
            }
        },
        template: `
          <div>
            图书名称：{{ name }}，图书单价：{{ price }}，图书数量：{{ number }}，价格：{{ price * number }}元
            &nbsp;
            <button @click="fun_a()">+1</button>
          </div>
        `
    })
    new Vue({
        el: '#app',
        data() {
            return {
                price: 0,
                books: [
                    {
                        'name': '数学',
                        'price': 19.8
                    },
                    {
                        'name': '语文',
                        'price': 26.3
                    },
                    {
                        'name': '英语',
                        'price': 7.6
                    },
                    {
                        'name': '化学',
                        'price': 8.1
                    }
                ]

            }
        },
        methods: {
            fun_a(p) {
                this.price += p
            }
        }
    })
</script>